<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<!-- 
		 1、id选择器
				$("#bb")
		 2、类选择器
				$(".aa")
		 3、标签选择器
				$("p")
		 4、后代选择器
				$("选择器1 选择器2")
		 5、子代选择器
				$("选择器1>选择器2")
		 6、属性选择器
				$("[属性]")  
				$("[属性='值']") 等于
				$("[属性!='值']") 不等于
				$("[属性^='值']")  开头等于
				$("[属性$='值']")  结尾等于
				$("[属性*='值']")  包含
		 7、位置选择器
				$("选择器:first")  
				$("选择器:last")
				$("选择器:odd")
				$("选择器:even)
				$("选择器:eq(n))
				$("选择器:gt(n)")
				$("选择器:lt(n)")
				
				注意：
					开头是第0个
		 -->
		<h3>属性选择器</h3>
		<ul class="box1">
			<li gg="abcdef">我的gg属性是abcdef</li>
			<li gg="kicdr">我的gg属性是kicdr</li>
			<li pp="abwcdf">我的pp属性是abwcdf</li>
			<li gg="abffcd">我的gg属性是abffcd</li>
			<li gg="kjhdef">我的gg属性是kjhdef</li>			
		</ul>
		
		<h3>位置选择器</h3>
		<ul class="box2">
			<li>111</li>
			<li>222</li>
			<li>333</li>
			<li>444</li>
			<li>555</li>
			<li>666</li>
			<li>777</li>
		</ul>
		
		<script type="text/javascript">
			$(function(){
				// $(".box1 li[gg]").css('color', 'blue');
				// $(".box1 li[gg^='ab']").css('color', 'blue');
				$(".box1 li[gg*='cd']").css('color', 'blue');
				
				
				// $("li:odd").css('color', 'red');
				// $("li:eq(0)").css('color', 'red');
				$(".box2 li:gt(2)").css('color', 'red');	
			});		
		</script>
		 
	</body>
</html>
